<template>
    <div>
        <van-nav-bar title="会员登录" left-arrow />
        <van-form @submit="onSubmit">
            <van-field v-model="mobile" name="请输入手机号" placeholder="请输入手机号"
                :rules="[{ required: true, message: '请填写正确手机号', pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/ }]" />
            <van-field v-model="code" name="请输入图形验证码" placeholder="请输入图形验证码"
                :rules="[{ required: true, message: '请输入图形验证码' }]" />
                <div class="box">
                    <img :src="code1" alt="">
                </div>
            <van-field v-model="sms" center clearable placeholder="请输入短信验证码">
                <template #button>
                    <span @click="document" style="color: #d8b99e;">发送验证码</span>
                    <!-- <van-button size="small" type="primary">发送验证码</van-button> -->
                </template>
            </van-field>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import { code, sms } from '@/api/user'
export default {
  name: 'LoginView',
  data () {
    return {
      mobile: '',
      code: '',
      sms: '',
      // 图形
      code1: '',
      //   图形key
      captchaKey: ''
    }
  },
  async created () {
    const res = await code()
    console.log(res)
    this.code1 = res.data.base64
    this.captchaKey = res.data.key
  },
  methods: {
    async onSubmit (values) {
      console.log('submit', values)
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      await this.$store.dispatch('user/loginAsync', this.mobile)
      this.$router.push('/')
      this.$toast.success('登录成功')
    },
    async document () {
      const res = await sms({
        mobile: this.mobile,
        captchaKey: this.captchaKey,
        captchaCode: this.code1
      })
      console.log(res)
      this.$toast.success('246810')
    }
  }
}
</script>

<style lang="less" scoped>
.van-form{
    position: relative;
    margin: 20px;
}
.box{
    position: absolute;
    top: 57px;
    right: 18px;
}
img{
    width: 100px;
    height: 40px;
}
</style>
